<template>
  <view>
    <view class="report-doctor flexrow">
      <view>
        <image style="border-radius: 50%" :src="DiseaseCaseDetils.doctorHeadImage
            ? baseUrl + DiseaseCaseDetils.doctorHeadImage
            : 'https://applet.youtuyiliao.com/profile/upload/xiaochengxu/static/avatar.png'
          " mode="aspectFill"></image>
      </view>
      <view class="report-doctorright">
        <view class="flexrow flexbetween">
          <view>
            {{ DiseaseCaseDetils.doctorName || "-" }}
            {{ DiseaseCaseDetils.jobTitle || "" }}
          </view>
          <view class="color999 fontsize12">
            {{ DiseaseCaseDetils.createDate || "-" }}
          </view>
        </view>
        <view class="color999 fontsize14 magintop4">
          {{ DiseaseCaseDetils.hospital || "-" }}
          {{ DiseaseCaseDetils.departmentName || "-" }}
        </view>
      </view>
    </view>
    <view class="color333 fontsize14 report-title">病情分析</view>
    <view class="flexrow flexbetween report-con">
      <view>患者</view>
      <view>{{ DiseaseCaseDetils.patientName || "-" }}</view>
    </view>
    <view class="flexrow flexbetween report-con">
      <view>病情诊断</view>
      <view>{{ DiseaseCaseDetils.diseaseName || "无" }}</view>
    </view>
    <view class="report-contwo">
      <view>诊疗医嘱</view>
      <view>{{ DiseaseCaseDetils.medicalAdvice || "无" }}</view>
    </view>
    <view class="color333 fontsize14 report-title">药品处方</view>
    <view v-for="(item, index) in DiseaseCaseDetils.prescriptionJson">
      <view class="flexrow flexbetween report-con">
        <view>药品名称</view>
        <view>{{ item.name || "无" }}</view>
      </view>
      <view class="flexrow flexbetween report-con">
        <view>药品数量</view>
        <view>{{ item.amount || 0 }}</view>
      </view>
      <view class="flexrow flexbetween report-con">
        <view>用法用量</view>
        <view>{{ item.dosage || "无" }}</view>
      </view>
      <view class="report-contwo">
        <view>备注</view>
        <view>{{ item.remark || "无" }}</view>
      </view>
    </view>
    <lack v-if="
      DiseaseCaseDetils.prescriptionJson &&
      DiseaseCaseDetils.prescriptionJson.length == 0
    "></lack>
    <view v-if="DiseaseCaseDetils.signImage" class="color333 fontsize14 report-title">
      医生签名
    </view>
    <view class="doctorsign">
      <image :src="baseUrl + DiseaseCaseDetils.signImage" mode=""></image>
    </view>
  </view>
</template>

<script>
import { getDiseaseCaseDetils } from '../../../api/index.js'
import Lack from "@/chronicDisease/components/lack/lack.vue";

export default {
  components: {
    Lack
  },
  data() {
    return {
      DiseaseCaseDetils: {},
      baseUrl: "",
    };
  },
  onLoad(options) {
    let orderNumber = options.orderNumber;
    this._getDiseaseCaseDetils(orderNumber);
    this.baseUrl = this.$store.state.chronic.baseUrl;
  },
  methods: {
    _getDiseaseCaseDetils(orderNumber) {
      getDiseaseCaseDetils({
        orderNumber: orderNumber,
      }).then((res) => {
        this.DiseaseCaseDetils = res.data;
        this.DiseaseCaseDetils.prescriptionJson = JSON.parse(
          res.data.prescriptionJson
        );
        this.$store.commit("setPageInfo", {
          createDiseaseCaseCountDown: true,
        });
      });
    },
  },
};
</script>

<style lang="scss">
.report-doctor {
  padding: 22rpx 40rpx;

  image {
    width: 80rpx;
    height: 80rpx;
    margin-right: 20rpx;
  }

  .magintop4 {
    margin-top: 8rpx;
  }

  .report-doctorright {
    width: calc(100% - 90rpx);
  }
}

.report-title {
  height: 96rpx;
  line-height: 96rpx;
  padding: 0 40rpx;
  background-color: #f7f7f7;
}

.report-con {
  height: 96rpx;
  line-height: 96rpx;
  padding: 0 40rpx;
  font-size: 28rpx;
  color: #333;
  border-bottom: 2rpx solid #f7f7f7;
}

.report-contwo {
  height: 164rpx;
  padding: 0 40rpx;
  font-size: 28rpx;
  color: #333;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.report-contwo>view:first-child {
  margin-bottom: 20rpx;
}

.doctorsign {
  height: 300rpx;
  padding: 40rpx;

  image {
    width: 100%;
    height: 100%;
  }
}
</style>
